<template>
  <div style="margin-left: 120px;">
    <el-tabs v-model="activeName" style="width: 57px;">
      <el-tab-pane label="基本信息" style="font-size: 25px" name="first"></el-tab-pane>
    </el-tabs>
    <div style="width: 1224px;height: 285px;background-color: #f8f9fa">
      <div style="margin-left:25px;padding-top:25px;font-size: 25px;">基本信息</div>
      <el-form class="el-form el-form--label-left active">
        <div class="el-form-item el-form-item-medium">
          <label class="el-form-item__label" style="width:100px;">课程名称</label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>{{course.courseName}}</span>
          </div>
        </div>
        <hr>
        <div class="el-form-item el-form-item-medium">
          <label class="el-form-item__label" style="width:100px;">教学班级</label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>{{course.className}}</span>
          </div>
        </div>
        <hr>
        <div class="el-form-item el-form-item-medium">
          <label class="el-form-item__label" style="width:100px;">学年-学期</label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>{{course.term}}</span>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseMessage",
  data() {
    return {
      activeName: 'first',
      course: {
        courseName: '',
        className: '',
        term: ''
      }
    };
  },
  mounted() {
    const course = localStorage.getItem("course");
    if( this.course){
      this.course = JSON.parse(course);
    }
  }
}
</script>

<style scoped>
.el-form--label-left{
  margin: 25px 25px;
  border: 1px darkgray solid;
  border-radius: 5px;
  border-left: 6px #2874cb solid;
}
.el-form-item-medium{
  margin-left: 25px;
  margin-bottom: 5px;
}
</style>
